<%--
  Created by IntelliJ IDEA.
  User: 34662
  Date: 2023/7/4
  Time: 16:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<style>
    body{
        margin-left: 20px;
    }

</style>
<style>
    .layui-form{
        display: flex;
        width: 100%;
    }
    #left{
        display: flex;
        flex-direction: column;
        /*margin-top: 60px;*/
        /*margin-left: 300px;*/
    }
    #right{
        display: flex;
        flex-direction: column;
        /*margin-top: 69px;*/
        margin-left: 100px;
    }
    #rightLast{
        display: flex;
        flex-direction: column;
        /*margin-top: 69px;*/
        margin-left: 200px;
    }
</style>
<body>
<form action="#" id="fm">
    <div class="layui-form">
        <div id="left">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    物料
                    <input type="text"  name="materialsName" required placeholder="物料" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    物料状态
                    <select name="materialsStatus" lay-verify="">
                        <option value="-1">请选择状态</option>
                        <option value="0">面里料</option>
                        <option value="1">辅料</option>
                        <option value="2">包装辅料</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    供应商
                    <input type="text"  name="supplier" required placeholder="自供/厂供" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    颜色
                    <select lay-filter="colorId"   id="colorId"  name="colorId" lay-verify="required">
                        <option value="-1" id="cp">请选择</option>
                    </select>
                </div>
            </div>
        </div>
        <div id="right">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    仓库
                    <select lay-filter="warehouseId"  id="warehouseId"  name="warehouseId" lay-verify="required">
                        <option value="-1" id="wp">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    仓库区域
                    <select lay-filter="storeAreaId"   id="storeAreaId"  name="storeAreaId" lay-verify="required">
                        <option value="-1" id="pp">请选择</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-inline">
                    物料种类
                    <select lay-filter="materialsKindId"   id="materialsKindId"  name="materialsKindId" lay-verify="required">
                        <option value="-1" id="mkp">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    物料规格
                    <select lay-filter="qualityId"   id="qualityId"  name="qualityId" lay-verify="required">
                        <option value="-1" id="qp">请选择</option>
                    </select>
                </div>
            </div>
        </div>
        <div id="rightLast">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    批次号
                    <input type="text" disabled name="batchNumber" required placeholder="批次号" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    进货数量
                    <input type="text"  name="batchCount" required placeholder="进货数量" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    进货单价
                    <input type="text"  name="batchPrice" required placeholder="进货单价" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    进货时间
                    <input type="date"  name="batchTime" required placeholder="进货时间" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    入库时间
                    <input type="date"  name="inputTime" required placeholder="入库时间" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
</form>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    </div>
</div>
</body>
<script>
     layui.use(['element', 'layer','form'], function () {
        // 生成随机数
        var random = Math.floor(Math.random()* 10000);
        // 获取当前日期和时间
        var currentDate = new Date();
        var year = currentDate.getFullYear()-2000;
        var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
        var day = currentDate.getDate().toString().padStart(2, '0');
        var hours = currentDate.getHours().toString().padStart(2, '0');
        var minutes = currentDate.getMinutes().toString().padStart(2, '0');
        var seconds = currentDate.getSeconds().toString().padStart(2, '0');
        // 组合批次号
        let batchNumber ="pc"+ year + month + day + hours + minutes + seconds + random;
         $("[name=batchNumber]").val(batchNumber);
        // 输出批次号
        var element = layui.element,
            form = layui.form,
            layer = layui.layer;
        $.ajax({
            "url": "warehouse/queryAllMaterialKind",
            "type": "post",
            "data": {},
            "dataType": "json",
            "contentType": "application/json;charset=utf-8",
            "success": function(result) {
                let optemp="";
                for (let i in result){
                    optemp+=`
               <option value="\${result[i].kindId}">\${result[i].kindName}</option>
                `
                }
                $('#mkp').after(optemp)
                // 重新渲染表单元素
                form.render('select');
            },
            "error": function() {
            }
        });
        $.ajax({
            "url": "warehouse/queryAllQuality",
            "type": "post",
            "data": {},
            "dataType": "json",
            "contentType": "application/json;charset=utf-8",
            "success": function(result) {
                let optemp="";
                for (let i in result){
                    optemp+=`
               <option value="\${result[i].qualityId}">\${result[i].qualityName}</option>
                `
                }
                $('#qp').after(optemp)
                // 重新渲染表单元素
                form.render('select');
            },
            "error": function() {
            }
        });
        $.ajax({
            "url": "warehouse/queryAllStoreArea",
            "type": "post",
            "data": {},
            "dataType": "json",
            "contentType": "application/json;charset=utf-8",
            "success": function(result) {
                let optemp="";
                for (let i in result){
                    optemp+=`
               <option value="\${result[i].storeAreaId}">\${result[i].storeAreaName}</option>
                `
                }
                $('#pp').after(optemp)
                // 重新渲染表单元素
                form.render('select');
            },
            "error": function() {
            }
        });

        $.ajax({
            "url": "warehouse/queryAllColor",
            "type": "post",
            "data": {},
            "dataType": "json",
            "contentType": "application/json;charset=utf-8",
            "success": function(result) {
                let optemp="";
                for (let i in result){
                    optemp+=`
               <option value="\${result[i].colorId}">\${result[i].colorName}</option>
                `
                }
                $('#cp').after(optemp)
                // 重新渲染表单元素
                form.render('select');
            },
            "error": function() {
            }
        });

        $.ajax({
                "url": "warehouse/queryAllWarehouse",
            "type": "get",
            "data": {},
            "dataType": "json",
            "contentType": "application/json;charset=utf-8",
            "success": function(result) {
                    console.log(result)
                let optemp="";
                for (let i in result){
                    optemp+=`
               <option value="\${result[i].warehouseId}">\${result[i].storeNumber}</option>
                `
                }
                $('#wp').after(optemp)
                // 重新渲染表单元素
                form.render('select');
            },
            "error": function() {
            }
        });
        form.on('submit(formDemo)', function(){
            let batchPrice = $("[name=batchPrice]").val();
            if (isNaN(batchPrice)){
                layer.msg("单价必须为数字")
                return false;
            }
            let batchCount = $("[name=batchCount]").val();
            if (isNaN(batchCount)){
                layer.msg("数量必须为数字")
                return false;
            }
            let data = {}
            let value = $("#fm").serializeArray()
            $.each(value, function(index, item) {
                data[item.name] = item.value;
            });
            let date = JSON.stringify(data);
            console.log(date)
            $.ajax({
                "url": "warehouse/addMaterialsAndBatch",
                "type": "post",
                "data": date,
                "dataType": "json",
                "contentType": "application/json;charset=utf-8",
                "success": function(result) {
                    layer.msg(result.msg)
                    form.render('select');
                    layer.close();
                },
                "error": function() {
                }
            });
        })
    })
</script>
</html>
